<template>
    <div>
        <showcate  :data='catelist' :cid='course.cid' @cid='getcid'/>
        <van-field v-model="course.name" label="名称" />
        <van-field v-model="course.description" label="描述" />
        <van-field v-model="course.tname" label="讲师" />
        <van-image :src='"http://localhost:5000/static/upload/"+course.pic' width=100 height=100 />
        <van-button @click='picshow=true'>删除</van-button>
        <van-button @click='fileshow=true'>更换图片</van-button>
        <!--图片删除-->
        <van-popup v-model="picshow" class="filebg">
            <h1>确定要删除吗?</h1>
            <button @click='delpic(course.pic)'>删除</button>
            <button>取消</button>
        </van-popup>
        <!--图片替换-->
        <van-popup v-model="fileshow" class='filebg'>
            <van-uploader :after-read='changepic'/>
        </van-popup>

        <br>
        <video :src='"http://localhost:5000/static/upload/"+i' controls="controls" v-for='i in videos' width=300 height=200></video>
        <van-button>删除</van-button>
        <van-button>更换图片</van-button>
        <br>
        <van-button @click='update'>修改</van-button>

    </div>
</template>

<script>
import showcate from './showcate.vue'
    export default {
        components:{
            'showcate':showcate,
            
            
        },
        data(){
            return{
                catelist:[],
                id:this.$route.query.id,
                course:{'name':''},
                videos:[],
                picshow:false,
                fileshow:false

            }
        },
        methods: {
              //获取所有分类信息
        getCatelist(){
            this.$axios.get('lianxi/showcate/').then(res=>{
                    this.catelist =res.data.list
                })
        },
        getcourse(){
            this.$axios.get('lianxi/courseM/?id='+this.id).then(res=>{
                this.course = res.data.course
                //把视频列表转换成json
                this.videos = JSON.parse(res.data.course['vedios'])
            })
        },
        getcid(id){
            alert(id)
        },
        //图片删除
        delpic(name){
            this.$axios.delete('lianxi/delpicmp4/?name='+name).then(res=>{
                //回来操作，如果是图片把pic设置为'',如果是视频从列表中移除单个
                this.picshow=false
                this.course.pic = ''
                
                
            })
        },
        changepic(file){
            alert(file)
    
            //判断看以前的有没有图片，如果有先删除再上传
            if(this.course.pic != ''){
                this.delpic(this.course.pic)
            }
            let data=new FormData()
            data.append('file',file.file)
            this.$axios.post('lianxi/upload/',data).then(res=>{
                //更新course的pic
                this.course.pic = res.data.pic
                //框销售
                this.fileshow = false
            })
        },
        update(){

        }
        },
        mounted() {
            this.getCatelist()
        },
        mounted() {
        this.getcourse()
        this.getCatelist()
    },

    }
</script>

<style scoped>
.filebg{
    width: 50rem;
    height: 20rem;
    text-align: center;
    padding-top: 5rem;
}
</style>